<template>
  <div id="app">
    <div class="container">
      <div class="col-md-11">
        <button class="btn btn-primary" @click="showAddFun">添加</button>
        <button class="btn btn-danger" @click="delAllFun">批量删除</button>
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>
                <input
                  type="checkbox"
                  id="selectAll"
                  :checked="isChecked"
                  @change="selectAllFun(isChecked)"
                />
                <label for="selectAll">全选</label>
              </th>
              <th v-for="titleData in titleDatas" :key="titleData.id">
                {{ titleData.title }}
                <a href="javascript:;" @click="ascSortFun(titleData.sortStr)"
                  >升序</a
                >
                <a href="javascript:;" @click="desSortFun(titleData.sortStr)"
                  >降序</a
                >
              </th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(userlistData, index) in userlistDatas"
              :key="userlistData.id"
            >
              <td>
                <input
                  type="checkbox"
                  :checked="userlistData.select"
                  @change="selectOneFun(index, userlistData.select)"
                />
              </td>
              <td>{{ userlistData.id }}</td>
              <td>{{ userlistData.username }}</td>
              <td>{{ userlistData.age }}</td>
              <td>
                <button class="btn btn-primary" @click="showEditFun(index)">
                  修改
                </button>
                <button class="btn btn-danger" @click="delFun(userlistData.id)">
                  删除
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 添加数据的内容 -->
        <div class="container" v-show="showAddUser">
          <div class="row">
            <div class="col-md-6">
              <h2>添加用户信息</h2>
              <form>
                <div class="form-group">
                  <label for="username">姓名</label>
                  <input
                    type="text"
                    class="form-control"
                    id="username"
                    placeholder="请输入姓名"
                    v-model="addUser.username"
                  />
                </div>
                <!-- v-model的修饰符 -->
                <div class="form-group">
                  <label for="age">年龄</label>
                  <input
                    type="number"
                    class="form-control"
                    id="age"
                    placeholder="请输入年龄"
                    v-model.number="addUser.age"
                  />
                </div>
                <!-- 点击事件的同时--会进行刷新提交 -->
                <!-- input-button 普通的button -->
                <button class="btn btn-success" @click.prevent="addUserBtn">
                  添加
                </button>
              </form>
            </div>
          </div>
        </div>
        <!-- 修改数据的内容 -->
        <div class="container" v-show="showEditUser">
          <div class="row">
            <div class="col-md-6">
              <h2>修改用户信息</h2>
              <form>
                <div class="form-group">
                  <label for="username">姓名</label>
                  <input
                    type="text"
                    class="form-control"
                    id="username"
                    placeholder="请输入姓名"
                    v-model="editUser.username"
                  />
                </div>
                <!-- v-model的修饰符 -->
                <div class="form-group">
                  <label for="age">年龄</label>
                  <input
                    type="number"
                    class="form-control"
                    id="age"
                    placeholder="请输入年龄"
                    v-model.number="editUser.age"
                  />
                </div>
                <!-- 点击事件的同时--会进行刷新提交 -->
                <!-- input-button 普通的button -->
                <button class="btn btn-success" @click.prevent="editUserBtn">
                  修改
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 本地图片的引入使用import导入方式进行使用
// vue组件使用是ES6模块化的规范
// 1.删除事件
// 2.全选事件
// 3.选择其中一个的事件
// 4.批量删除
// 5.添加事件
// 6.修改事件
// 7.升序和降序

export default {
  name: "App",
  components: {},
  // data:对象/函数在组件中只能是函数
  data() {
    return {
      titleDatas: [
        { id: 1, title: "序号", sortStr: "id" },
        { id: 2, title: "姓名", sortStr: "username" },
        { id: 3, title: "年龄", sortStr: "age" },
      ],
      userlistDatas: [
        { id: 3, username: "崔祖贤", age: 20, select: false },
        { id: 1, username: "张鹏", age: 22, select: false },
        { id: 2, username: "李长春", age: 21, select: false },
      ],
      addUser: {
        username: "",
        age: "",
        select: false,
      },
      editUser: {
        username: "",
        age: "",
        select: false,
      },
      showAddUser: false,
      showEditUser: false,
      updateIndex: null,
    };
  },
  methods: {
    // 删除事件
    delFun(userid) {
      //  this.userlistDatas.find((item) => item.id == userid);
      let index = this.userlistDatas.findIndex((item) => item.id == userid);
      // 删除数据
      this.userlistDatas.splice(index, 1);
    },
    // 全选事件
    selectAllFun(isChecked) {
      this.userlistDatas.forEach((item) => {
        // item.select = !isChecked;
        // vm.$set( target, propertyName/index, value )
        this.$set(item, "select", !isChecked);
      });
    },
    // 选择一个的事件
    selectOneFun(index, selectSelf) {
      this.$set(this.userlistDatas[index], "select", !selectSelf);
    },
    // 批量删除
    delAllFun() {
      this.userlistDatas = this.userlistDatas.filter((item) => {
        return !item.select;
      });
    },
    // 展示添加内容
    showAddFun() {
      this.showAddUser = true;
    },
    // 添加事件
    addUserBtn() {
      // Math.max(1,2,3,4,53,8);
      // 将参数,,,转换成数组
      var idArr = this.userlistDatas.map((item) => {
        return item.id;
      });
      // console.log(idArr);
      // 找到最大的id值,进行添加数据
      var maxId = Math.max.apply(Math, idArr);
      this.addUser.id = maxId + 1;
      // console.log(this.addUser);
      this.userlistDatas.push(this.addUser);
      console.log(this.userlistDatas);
      // 收尾工作,关闭添加模块元素,清空添加数据
      this.showAddUser = false;
      this.addUser = {
        username: "",
        age: "",
      };
    },
    // 展示修改的内容
    showEditFun(index) {
      this.showEditUser = true;
      this.editUser.username = this.userlistDatas[index].username;
      this.editUser.age = this.userlistDatas[index].age;
      this.editUser.id = this.userlistDatas[index].id;
      this.editUser.select = this.userlistDatas[index].select;
      this.updateIndex = index;
    },
    // 修改事件
    editUserBtn() {
      this.userlistDatas.splice(this.updateIndex, 1, {
        id: this.editUser.id,
        username: this.editUser.username,
        age: this.editUser.age,
        select: this.editUser.select,
      });
      console.log(this.userlistDatas);
      // 收尾工作,关闭修改模块元素,清空修改数据
      this.showEditUser = false;
      this.editUser = {
        username: "",
        age: "",
      };
    },
    // 升序
    ascSortFun(sortStr) {
      this.userlistDatas.sort(function (a, b) {
        console.log(a);
        if (typeof a[sortStr] == "string" && typeof b[sortStr] == "string") {
          console.log(a[sortStr].localeCompare(b[sortStr]));

          return a[sortStr].localeCompare(b[sortStr]);
        } else {
          return a[sortStr] - b[sortStr];
        }
      });
    },
    // 降序
    desSortFun(sortStr) {
      this.userlistDatas.sort(function (a, b) {
        console.log(a);
        if (typeof a[sortStr] == "string" && typeof b[sortStr] == "string") {
          console.log(a[sortStr].localeCompare(b[sortStr]));

          return b[sortStr].localeCompare(a[sortStr]);
        } else {
          return b[sortStr] - a[sortStr];
        }
      });
    },
  },
  // 局部过滤器
  filters: {},
  // 计算属性
  computed: {
    // 全选的计算属性
    isChecked() {
      // every
      var rel = this.userlistDatas.every((item) => {
        return item.select;
      });
      console.log(rel);
      return rel;
    },
  },
  watch: {},
};
</script>

<style>
.container button {
  margin-right: 5px;
}
.container table th a {
  margin-right: 5px;
}
</style>
